<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>小花</title>
    <style type="text/css">
    .center-wrapper {
        position: absolute;
        top: 20%;
        left: 20%;
        z-index: 3;
        -webkit-transform: translate(-20%, -20%);
    }
    </style>
</head>

<body class="center-wrapper" style="background:url(qxbg2.png);">

    <p style="font-size: 40px;color: #B22222">嘿，小花</p>
    <div id='auto' style="font-size: 15px;color: #333333"></div>

    <script>
    var str = '你在等一列火车，火车会带你去很远的地方，你知道火车会带你去哪，但是你并不确定，不过没关系，因为我们会永远在一起。.....';
    var i = 0;

    function auto() {
        var divTyping = document.getElementById('auto');
        if (i <= str.length) {
            divTyping.innerHTML = str.slice(0, i++);
            setTimeout('auto()', 200); 
        }
    }
    auto();
    </script>
</body>

</html>